<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>团队管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建团队</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
            <el-form-item label="上传头像" prop="logo">
                <el-upload
                    v-loading="loading"
                    class="avatar-uploader"
                    action="lll"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :http-request="updateLogo"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="addForm.logo" :src="addForm.logo" class="avatar">
                    <h1 v-else class="el-icon-plus avatar-uploader-icon">+</h1>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名" prop="name">
                <el-input v-model="addForm.name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="团队介绍" prop="introduction">
                <el-input v-model="addForm.introduction" placeholder="请输入团队介绍" />
            </el-form-item>
            <el-form-item label="团队备注" prop="note">
                <el-input v-model="addForm.note" placeholder="请输入团队介绍" />
            </el-form-item>
            <el-form-item label="leader id" prop="leader_id">
                <el-input v-model="addForm.leader_id" placeholder="请输入社团leader id" />
            </el-form-item>
            <el-form-item label="leader备注" prop="leader_note">
                <el-input v-model="addForm.leader_note" placeholder="请输入社团leader 备注" />
            </el-form-item>
            <el-form-item>
                <br><br>
                <el-button @click="cancel" style="margin-right: 50px">返回</el-button>
                <el-button type="primary" @click="addUser">确定</el-button>
            </el-form-item>>
        </el-form>

    </el-card>

</template>

<script>
    import API from "@/network/team";

    export default {
        data(){
            return{
                addForm:{
                    logo:'',
                    name: "",
                    introduction: '',      //团队介绍
                    note: '',              //团队备注
                    leader_id: '13273601604063232',          //leader的id
                    leader_note:''         //leader的备注
                },
                addFormRules:{         //添加表单的验证对象
                    logo: [
                        {required:true,message:'请上传头像', trigger:'blur'},
                    ],
                    name: [
                        {required:true,message:'请输入团队名', trigger:'blur'},
                        {min: 3, max: 10, message: '团队名的长度在3~10个字符之间'}
                    ],
                    introduction: [
                        {required:true,message:'请输入团队介绍', trigger:'blur'},
                    ],
                    note: [
                        {required:true,message:'请输入社团备注', trigger:'blur'},
                    ],
                    leader_id: [
                        {required:true,message:'请输入leader id', trigger:'blur'}
                    ],
                    leader_note: [
                        {required:true,message:'请输入leader note', trigger:'blur'}
                    ],
                }
            }
        },
        methods:{
            //增加用户
            addUser(){
                API.CreateTeam(this.addForm).then(res=>{
                    console.log(res)
                    if(res.data.code === 200){
                        this.$message.success("团队创建成功")
                        this.getList()
                        this.$router.push("team")
                    }else {
                        this.$message.error("团队创建失败")
                    }
                })

            },

            updateLogo(item){
                //验证图片格式大小信息
                const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
                const isLt2M = item.file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                //图片格式大小信息没问题 执行上传图片的方法
                if (isJPG && isLt2M == true) {
                    // post上传图片
                    let App = this;
                    //定义FormData对象 存储文件
                    let mf = new FormData();
                    //将图片文件放入mf
                    mf.append('file', item.file);
                    console.log(mf)
                    API.UpLogo(mf).then(res => {
                        console.log(res)
                        App.addForm.logo = res.data.data
                        console.log(App.addForm.logo)
                    })
                    // App.$Api.fileUpload(mf, function (result) {
                    //   if (result.result == "true") {
                    //     App.$notify.success({
                    //       title: '温馨提示：',
                    //       message: result.message,
                    //     });
                    //     //将临时文件路径赋值给显示图片路径（前端显示的图片）
                    //     App.imageUrl = App.tempUrl;
                    //     //将后台传来的数据库图片路径赋值给car对象的图片路径
                    //     App.car.carImg = result.imgUrl;
                    //   } else {
                    //     App.$notify.error({
                    //       title: '温馨提示：',
                    //       message: result.message,
                    //     });
                    //   }
                    // })
                }
            },
            handleAvatarSuccess(res, file) {
                this.addForm.logo = URL.createObjectURL(file.raw);
            },
            cancel(){
                this.$router.push("team")
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style>

.el-form{
    margin-top: 70px;
}

.el-form-item{
    padding-top: 10px;
    width: 500px;
    padding-left: 20px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center; padding-left:10px; font-size: 30px
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 120px;
    display: block;
}
</style>
